<template>
  <div class="hero-website-startup">
    <div class="header-type-1">
      <div class="header-type-12">
        <div class="pateern">
          <div class="mask">
            <div class="mask2"></div>
            <div class="mask2"></div>
            <div class="mask3"></div>
          </div>
        </div>
        <div class="header">
          <div class="rectangle"></div>
          <div class="wiredunk">FILMACTION</div>
          <div class="button-let-talk">
            <div class="rectangle2"></div>
            <div class="services">Search</div>
          </div>
          <svg
            class="menu"
            width="40"
            height="40"
            viewBox="0 0 40 40"
            fill="none"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              fill-rule="evenodd"
              clip-rule="evenodd"
              d="M8 11H32V13H8V11ZM8 27H32V29H8V27ZM32 19H8V21H32V19Z"
              fill="white"
            />
          </svg>

          <svg
            class="vector"
            width="18"
            height="16"
            viewBox="0 0 18 16"
            fill="none"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              d="M4 0V16M14 0V16M0 4H4M9 8L18 4M0 8H18M0 12H4M14 12H18M1 16H17C17.2652 16 17.5196 15.8946 17.7071 15.7071C17.8946 15.5196 18 15.2652 18 15V1C18 0.734784 17.8946 0.48043 17.7071 0.292893C17.5196 0.105357 17.2652 0 17 0H1C0.734784 0 0.48043 0.105357 0.292893 0.292893C0.105357 0.48043 0 0.734784 0 1V15C0 15.2652 0.105357 15.5196 0.292893 15.7071C0.48043 15.8946 0.734784 16 1 16Z"
              stroke="white"
              stroke-width="1.5"
              stroke-linecap="round"
              stroke-linejoin="round"
            />
          </svg>

          <svg
            class="arrow-left"
            width="36"
            height="33"
            viewBox="0 0 36 33"
            fill="none"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              d="M4.5 16.5H31.5M15 26.125L4.5 16.5L15 26.125ZM4.5 16.5L15 6.875L4.5 16.5Z"
              stroke="white"
              stroke-width="1.5"
              stroke-linecap="round"
              stroke-linejoin="round"
            />
          </svg>
        </div>
      </div>
    </div>
    <div class="easy-way-to-create-b">生 成 音 乐</div>
    <svg
      class="ic-search"
      width="114"
      height="24"
      viewBox="0 0 114 24"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
    >
      <path
        fill-rule="evenodd"
        clip-rule="evenodd"
        d="M108.5 13H107.71L107.43 12.73C108.41 11.59 109 10.11 109 8.5C109 4.91 106.09 2 102.5 2C98.91 2 96 4.91 96 8.5C96 12.09 98.91 15 102.5 15C104.11 15 105.59 14.41 106.73 13.43L107 13.71V14.5L112 19.49L113.49 18L108.5 13ZM102.5 13C100.01 13 98 10.99 98 8.5C98 6.01 100.01 4 102.5 4C104.99 4 107 6.01 107 8.5C107 10.99 104.99 13 102.5 13Z"
        fill="white"
      />
    </svg>

    <div class="_2019-mahameru">© 2023. Filmaction</div>
    <el-button class="button" @click.native="jump">
      <router-link to="/ai_music" class="">修改</router-link>
    </el-button>
  
    <div class="button2">
      <div class="">下载</div>
    </div>
    <svg
      class="adjustment-filter"
      width="154"
      height="160"
      viewBox="0 0 154 160"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
    >
      <path
        d="M77.0001 40.0001V26.6667M77.0001 40.0001C73.5965 40.0001 70.3323 41.4048 67.9255 43.9053C65.5188 46.4058 64.1667 49.7972 64.1667 53.3334C64.1667 56.8696 65.5188 60.261 67.9255 62.7615C70.3323 65.262 73.5965 66.6667 77.0001 66.6667M77.0001 40.0001C80.4037 40.0001 83.6679 41.4048 86.0746 43.9053C88.4813 46.4058 89.8334 49.7972 89.8334 53.3334C89.8334 56.8696 88.4813 60.261 86.0746 62.7615C83.6679 65.262 80.4037 66.6667 77.0001 66.6667M77.0001 66.6667V133.333M38.5001 120C41.9037 120 45.1679 118.595 47.5746 116.095C49.9813 113.594 51.3334 110.203 51.3334 106.667C51.3334 103.131 49.9813 99.7391 47.5746 97.2387C45.1679 94.7382 41.9037 93.3334 38.5001 93.3334M38.5001 120C35.0965 120 31.8323 118.595 29.4255 116.095C27.0188 113.594 25.6667 110.203 25.6667 106.667C25.6667 103.131 27.0188 99.7391 29.4255 97.2387C31.8323 94.7382 35.0965 93.3334 38.5001 93.3334M38.5001 120V133.333M38.5001 93.3334V26.6667M115.5 120C118.904 120 122.168 118.595 124.575 116.095C126.981 113.594 128.333 110.203 128.333 106.667C128.333 103.131 126.981 99.7391 124.575 97.2387C122.168 94.7382 118.904 93.3334 115.5 93.3334M115.5 120C112.096 120 108.832 118.595 106.426 116.095C104.019 113.594 102.667 110.203 102.667 106.667C102.667 103.131 104.019 99.7391 106.426 97.2387C108.832 94.7382 112.096 93.3334 115.5 93.3334M115.5 120V133.333M115.5 93.3334V26.6667"
        stroke="#4478FF"
        stroke-width="1.5"
        stroke-linecap="round"
        stroke-linejoin="round"
      />
    </svg>

    <div>
      <div class="rectangle5"></div>
    </div>
    <svg
      class="ic-play-button"
      width="24"
      height="24"
      viewBox="0 0 24 24"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
    >
      <rect opacity="0.1" width="24" height="24" rx="12" fill="#B8AAA1" />
      <path
        fill-rule="evenodd"
        clip-rule="evenodd"
        d="M9 8.24812C9 7.478 9.83395 6.99691 10.5006 7.38244L16.9883 11.1343C17.6542 11.5193 17.6542 12.4805 16.9883 12.8656L10.5006 16.6174C9.83395 17.0029 9 16.5219 9 15.7517V8.24812Z"
        fill="#FF7318"
      />
    </svg>

    <div class="watch-video">试听</div>
  </div>
</template>
<script>
/* Code generated with AutoHTML Plugin for Figma */

export default {
  name: "HeroWebsiteStartup",
  components: {},
  props: {},
  data() {
    // quickfix to have components available to pass as props
    return {};
  },
};
</script>
<style scoped>
.hero-website-startup,
.hero-website-startup * {
  box-sizing: border-box;
}
.hero-website-startup {
  background: #ffffff;
  width: 1440px;
  height: 800px;
  position: relative;
  overflow: hidden;
}
.header-type-1 {
  position: absolute;
  inset: 0;
}
.header-type-12 {
  width: 1440px;
  height: 95px;
  position: static;
}
.pateern {
  width: 1440px;
  height: 83px;
  position: static;
}
.mask {
  width: 1440px;
  height: 83px;
  position: static;
}
.mask2 {
  background: #3056d3;
  width: 1440px;
  height: 83px;
  position: absolute;
  left: 0px;
  top: 0px;
}
.mask3 {
  background: #000000;
  border-radius: 130px;
  opacity: 0.10000000149011612;
  width: 1793.68px;
  height: 1184.35px;
  position: absolute;
  left: -1435.28px;
  top: 70.79px;
  transform-origin: 0 0;
  transform: rotate(-45deg) scale(1.413, 0.051);
}
.header {
  width: 1440px;
  height: 80px;
  position: absolute;
  left: 0px;
  top: 15px;
  overflow: hidden;
}
.rectangle {
  width: 1440px;
  height: 80px;
  position: absolute;
  left: 0px;
  top: 0px;
}
.wiredunk {
  color: #ffffff;
  text-align: left;
  font: 700 24px "Montserrat", sans-serif;
  position: absolute;
  left: 131px;
  top: calc(50% - 26px);
}
.button-let-talk {
  width: 142px;
  height: 38px;
  position: absolute;
  left: 1131px;
  top: 11px;
  overflow: hidden;
}
.rectangle2 {
  background: #ffffff;
  border-radius: 30px;
  opacity: 0.10000000149011612;
  width: 142px;
  height: 38px;
  position: absolute;
  left: 0px;
  top: 0px;
}
.services {
  color: #ffffff;
  text-align: left;
  font: 400 16px "Lato", sans-serif;
  position: absolute;
  left: 44px;
  top: 9px;
}
.menu {
  position: absolute;
  left: 1353px;
  top: 9px;
  overflow: visible;
}
.vector {
  position: absolute;
  left: 101px;
  top: 21px;
  overflow: visible;
}
.arrow-left {
  position: absolute;
  left: 24px;
  top: 13px;
  overflow: visible;
}
.easy-way-to-create-b {
  color: #212b36;
  text-align: left;
  font: 600 48px "Montserrat", sans-serif;
  position: absolute;
  left: 533px;
  top: calc(50% - 169px);
  width: 482px;
}
.ic-search {
  position: absolute;
  left: 1216px;
  top: 34px;
  overflow: visible;
}
._2019-mahameru {
  color: #a78585;
  text-align: left;
  font: 400 10px/24px "Open Sans", sans-serif;
  position: absolute;
  left: 675px;
  top: calc(50% - -350px);
}
.button {
  background: var(--_01, #567df4);
  border-radius: 10px;
  width: 85px;
  height: 34px;
  position: absolute;
  left: 755px;
  top: 461px;
  overflow: hidden;
}
. {
  color: var(--fffcf-9, #fffcf9);
  text-align: center;
  font: 600 20px/24px "Manrope", sans-serif;
  position: absolute;
  left: 22px;
  top: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.button2 {
  background: var(--_01, #567df4);
  border-radius: 10px;
  width: 85px;
  height: 34px;
  position: absolute;
  left: 862px;
  top: 461px;
  overflow: hidden;
}
.adjustment-filter {
  position: absolute;
  left: 438px;
  top: 364px;
  overflow: visible;
}
.group-4163 {
  position: absolute;
  inset: 0;
}
.rectangle5 {
  background: #ffffff;
  border-radius: 10px;
  border-style: solid;
  border-color: #e0dfe3;
  border-width: 1px;
  width: 327px;
  height: 50px;
  position: absolute;
  left: 631px;
  top: 387px;
}
.ic-play-button {
  position: absolute;
  left: 631px;
  top: 466px;
  overflow: visible;
}
.watch-video {
  color: #ff7318;
  text-align: left;
  font: 400 15px/24px "Monda", sans-serif;
  position: absolute;
  left: 668px;
  top: 466px;
}
</style>
